<template>
  <div class="main">
    <div class="zuo">
      <div class="pie">
        <ik-pie-base-chart
          code="1"
          :title="title1"
          :data="data1"
          :height="height"
        />
      </div>
      <div class="table">
        <newbiao
          class="teshudebiao"
          :title="titlebiao1"
          :table-data="tableData1"
          :list="list1"
        />
      </div>
    </div>

    <div class="ditu">
      <map-two :title="titletu" :data="datatu" :init-zoom="initZoom" />
    </div>

    <div class="you">
      <div class="bar">
        <ik-bar-time-chart
          code="2"
          :title="title2"
          :data="data2"
          :time-dimension-field="timeDimensionField"
          :data-dimension-field="dataDimensionField"
          :height="height"
        />
      </div>
      <div class="table">
        <newbiao
          class="teshudebiao"
          :title="titlebiao2"
          :table-data="tableData2"
          :list="list2"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getData } from "@/api/ik/data/dataApi"
import MapTwo from "@/views/board/components/map2.vue"
import IkPieBaseChart from "@/components/ik/echarts/chart/pie/base/IkPieBaseChart/index.vue"
import IkBarTimeChart from "@/components/ik/echarts/chart/bar/time/IkBarTimeChart/index.vue"
import newbiao from "@/views/board/components/newbiao.vue"
export default {
  components: {
    MapTwo,
    IkPieBaseChart,
    IkBarTimeChart,
    newbiao
  },
  data() {
    return {
      // 左
      height: "200px",
      title1: "工单类型",
      data1: [
        // { type: "类型1", dep: "部门1", value: "30" },
        // { type: "类型2", dep: "部门2", value: "30" },
        // { type: "类型3", dep: "部门1", value: "30" },
        // { type: "类型4", dep: "部门2", value: "30" }
      ],
      titlebiao1: "任务工单",
      tableData1: [],
      list1: [
        {
          prop: "aaa",
          label: "项目",
          width: "100px"
        },
        { prop: "bbb", label: "类型", width: "80px" },
        {
          prop: "ccc",
          label: "设备",
          width: "100px"
        },
        {
          prop: "ddd",
          label: "内容"
        }
      ],

      // 地图
      initZoom: 4.5,
      titletu: "工单总览",
      datatu: [
        {
          code: "code",
          title: "广州",
          x: "113.330245",
          y: "23.116879",
          attr: "",
          num: "10"
        }
      ],

      // 右
      title2: "工单时序",
      dataDimensionField: "value",
      timeDimensionField: "time",
      data2: [
        { type: "类型6", time: "2020-01-23 09:07:53", value: "39" },
        { type: "类型4", time: "2021-04-22 07:04:22", value: "35" },
        { type: "类型1", time: "2021-03-21 14:09:47", value: "30" }
      ],
      titlebiao2: "预警工单",
      tableData2: [],
      list2: [
        {
          prop: "aaa",
          label: "项目",
          width: "100px"
        },
        { prop: "bbb", label: "类型", width: "80px" },
        {
          prop: "ccc",
          label: "设备",
          width: "160px"
        },
        {
          prop: "ddd",
          label: "内容"
        }
      ],
      aaa1: [],
      aaa2: []
    }
  },
  created() {
    this.yujing()
    this.renwu()
  },
  methods: {
    renwu() {
      getData('/doms/taskOrd/find/all', 'get', {
        searchData: JSON.stringify({}),
        orderData: {},
        token: this.$store.state.user.token
      })
        .then(res => {
          for (const i in res) {
            this.tableData1.push({
              aaa: res[i].areaBean.name,
              bbb: res[i].ordTypeItemBean.headBean.name,
              ccc: res[i].machineBean.name,
              ddd: res[i].remarks
            })
            this.aaa1.push({
              id: i,
              name: res[i].areaBean.name
            })
            this.data1.push({
              type: res[i].machineBean.name,
              value: this.aaa1.length
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    yujing() {
      getData("/doms/automaticOrd/find/all", "get", {
        searchData: JSON.stringify({}),
        orderData: {},
        token: this.$store.state.user.token
      })
        .then(res => {
          for (const i in res) {
            this.tableData2.push({
              aaa: res[i].areaBean.name,
              bbb: res[i].ordTypeItemBean.headBean.name,
              ccc: res[i].machineBean.name,
              ddd: res[i].remarks
            })
            this.aaa2.push({
              id: i,
              name: res[i].areaBean.name
            })
            this.data2.push({
              type: res[i].ordTypeItemBean.headBean.name,
              time: res[i].businessTime,
              value: this.aaa2.length
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.main {
  width: 100%;
  height: 100%;
  // overflow-y: scroll;
  @import "@/styles/robot/robot.scss";
  .zuo {
    top: 50px;
    left: 1%;
    position: absolute;
    width: 24%;
    z-index: 999;
    height: calc(100% - 50px);
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    .pie{
      height: 300px;
    }
    .table {
      height: calc(100% - 300px);
      width: 180%;
    }
  }
  .ditu {
    top: 0px;
    width: 100%;
    height: 100%;
    .time {
      height: 50px;
      img {
        width: 35px;
      }
    }
  }
  .you {
    top: 50px;
    right: 1%;
    position: absolute;
    height: 80%;
    width: 43.2%;
    z-index: 999;
    height: calc(100% - 50px);
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    .bar{
      height: 300px;
      width: 55.5%;
      align-self:flex-end;
      .ik-chart-card{
        margin: 0;
      }
    }
    .table {
      height: calc(100% - 300px);
      width: 100%;
      .ik-chart-card{
        margin: 0;
      }
    }
  }
}
</style>
<style lang="scss" scoped>

.teshudebiao {
  .el-table,
  .el-table__expanded-cell {
    background-color: transparent;
    border: 0px;
    color: white;
  }
  .el-table th,
  .el-table tr {
    background-color: transparent;
  }
  .el-table td,
  .el-table th.is-leaf {
    border: 0px;
  }
  .el-table--border::after,
  .el-table--group::after {
    width: 0px;
  }
  .cell {
    color: white;
  }
  .el-table tbody tr:hover > td {
    background-color: unset !important;
  }
  ::v-deep .el-table__body {
    border-collapse: separate !important;
    border-spacing: 0 15px !important;
    table-layout: auto !important;
  }
  ::v-deep .el-table,
  .el-table__expanded-cell {
    background-color: transparent !important;
  }
  ::v-deep .el-table--enable-row-transition .el-table__body td,
  .el-table .cell {
    background-color: transparent;
  }
}
</style>
